<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>数据整合与报表</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: bold; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-sm { padding: 4px 8px; font-size: 12px; }
        .table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .table th, .table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        .table th { background-color: #f5f5f5; }
        .chart-container { height: 300px; margin-bottom: 20px; }
        .report-actions { margin-top: 20px; display: flex; gap: 10px; }
        .scheduled-reports { margin-top: 30px; }
        .report-item { background: #f9f9f9; border-radius: 4px; padding: 15px; margin-bottom: 10px; }
        .report-meta { font-size: 14px; color: #666; margin-top: 5px; }
        .data-preview { margin-top: 20px; height: 300px; overflow-y: auto; }
        .template-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
        .template-card { background: #f9f9f9; border-radius: 8px; padding: 15px; cursor: pointer; transition: transform 0.2s; }
        .template-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .template-card-title { font-weight: bold; margin-bottom: 10px; }
        .template-card-description { font-size: 14px; color: #666; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>数据整合与报表</h1>
                <div>
                    <button class="btn btn-primary" onclick="createNewReport()">创建新报表</button>
                </div>
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('reports')">我的报表</div>
                <div class="tab" onclick="switchTab('scheduled')">计划任务</div>
                <div class="tab" onclick="switchTab('templates')">报表模板</div>
                <div class="tab" onclick="switchTab('data-sources')">数据源管理</div>
            </div>
            
            <!-- 我的报表标签内容 -->
            <div id="reports-content" class="tab-content">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>报表类型</label>
                        <select id="reportTypeFilter">
                            <option value="">所有类型</option>
                            <option value="sales">销售报表</option>
                            <option value="customer">客户报表</option>
                            <option value="service">客服报表</option>
                            <option value="performance">绩效报表</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>创建日期</label>
                        <select id="creationDateFilter">
                            <option value="">所有时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态</label>
                        <select id="statusFilter">
                            <option value="">所有状态</option>
                            <option value="active">已发布</option>
                            <option value="draft">草稿</option>
                            <option value="archived">已归档</option>
                        </select>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div>销售业绩季度报表</div>
                        <div>
                            <button class="btn btn-sm btn-secondary" onclick="exportReport(1, 'pdf')">PDF</button>
                            <button class="btn btn-sm btn-secondary" onclick="exportReport(1, 'excel')">Excel</button>
                            <button class="btn btn-sm btn-secondary" onclick="scheduleReport(1)">定时发送</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <img src="https://via.placeholder.com/1100x300?text=销售业绩图表" alt="销售业绩图表" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>销售人员</th>
                                <th>本季度销售额</th>
                                <th>目标完成率</th>
                                <th>同比增长</th>
                                <th>客户数量</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>张三</td>
                                <td>¥852,450</td>
                                <td>93%</td>
                                <td>+15%</td>
                                <td>34</td>
                            </tr>
                            <tr>
                                <td>李四</td>
                                <td>¥762,120</td>
                                <td>84%</td>
                                <td>+9%</td>
                                <td>28</td>
                            </tr>
                            <tr>
                                <td>王五</td>
                                <td>¥943,800</td>
                                <td>104%</td>
                                <td>+23%</td>
                                <td>41</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="report-actions">
                        <button class="btn btn-secondary" onclick="editReport(1)">编辑</button>
                        <button class="btn btn-secondary" onclick="deleteReport(1)">删除</button>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div>客户满意度分析</div>
                        <div>
                            <button class="btn btn-sm btn-secondary" onclick="exportReport(2, 'pdf')">PDF</button>
                            <button class="btn btn-sm btn-secondary" onclick="exportReport(2, 'excel')">Excel</button>
                            <button class="btn btn-sm btn-secondary" onclick="scheduleReport(2)">定时发送</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <img src="https://via.placeholder.com/1100x300?text=客户满意度图表" alt="客户满意度图表" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>服务类别</th>
                                <th>满意度评分</th>
                                <th>回复数量</th>
                                <th>同比变化</th>
                                <th>主要问题</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>产品质量</td>
                                <td>4.2/5</td>
                                <td>325</td>
                                <td>+0.3</td>
                                <td>耐用性</td>
                            </tr>
                            <tr>
                                <td>售后服务</td>
                                <td>4.5/5</td>
                                <td>287</td>
                                <td>+0.7</td>
                                <td>响应时间</td>
                            </tr>
                            <tr>
                                <td>交付速度</td>
                                <td>3.8/5</td>
                                <td>304</td>
                                <td>-0.2</td>
                                <td>物流延迟</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="report-actions">
                        <button class="btn btn-secondary" onclick="editReport(2)">编辑</button>
                        <button class="btn btn-secondary" onclick="deleteReport(2)">删除</button>
                    </div>
                </div>
            </div>
            
            <!-- 计划任务标签内容 -->
            <div id="scheduled-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>频率</label>
                        <select id="frequencyFilter">
                            <option value="">所有频率</option>
                            <option value="daily">每日</option>
                            <option value="weekly">每周</option>
                            <option value="monthly">每月</option>
                            <option value="quarterly">每季度</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态</label>
                        <select id="scheduledStatusFilter">
                            <option value="">所有状态</option>
                            <option value="active">已启用</option>
                            <option value="paused">已暂停</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>报表类型</label>
                        <select id="scheduledReportTypeFilter">
                            <option value="">所有类型</option>
                            <option value="sales">销售报表</option>
                            <option value="customer">客户报表</option>
                            <option value="service">客服报表</option>
                        </select>
                    </div>
                </div>
                
                <div class="scheduled-reports">
                    <div class="report-item">
                        <div class="report-header">
                            <strong>销售业绩周报</strong>
                            <span class="badge badge-success">已启用</span>
                        </div>
                        <div class="report-meta">
                            <div>频率: 每周一 上午9:00</div>
                            <div>收件人: 销售团队, 管理层</div>
                            <div>格式: PDF, Excel</div>
                            <div>下次发送: 2023年6月12日</div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="btn btn-sm btn-secondary" onclick="editSchedule(1)">编辑</button>
                            <button class="btn btn-sm btn-secondary" onclick="pauseSchedule(1)">暂停</button>
                            <button class="btn btn-sm btn-secondary" onclick="deleteSchedule(1)">删除</button>
                        </div>
                    </div>
                    
                    <div class="report-item">
                        <div class="report-header">
                            <strong>客户满意度月度报告</strong>
                            <span class="badge badge-warning">已暂停</span>
                        </div>
                        <div class="report-meta">
                            <div>频率: 每月1日 上午10:00</div>
                            <div>收件人: 客服团队, 产品团队, 管理层</div>
                            <div>格式: PDF</div>
                            <div>下次发送: 暂停中</div>
                        </div>
                        <div style="margin-top: 10px;">
                            <button class="btn btn-sm btn-secondary" onclick="editSchedule(2)">编辑</button>
                            <button class="btn btn-sm btn-secondary" onclick="resumeSchedule(2)">启用</button>
                            <button class="btn btn-sm btn-secondary" onclick="deleteSchedule(2)">删除</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 报表模板标签内容 -->
            <div id="templates-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>类别</label>
                        <select id="templateCategoryFilter">
                            <option value="">所有类别</option>
                            <option value="sales">销售</option>
                            <option value="customer">客户</option>
                            <option value="service">客服</option>
                            <option value="performance">绩效</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>搜索</label>
                        <input type="text" id="templateSearch" placeholder="搜索模板...">
                    </div>
                </div>
                
                <div class="template-gallery">
                    <div class="template-card" onclick="useTemplate(1)">
                        <div class="template-card-title">销售业绩仪表盘</div>
                        <div class="template-card-description">
                            包含销售额统计、业绩对比、目标完成率等关键指标的综合报表。
                        </div>
                    </div>
                    
                    <div class="template-card" onclick="useTemplate(2)">
                        <div class="template-card-title">客户满意度分析</div>
                        <div class="template-card-description">
                            对客户调查结果进行详细分析，包括满意度评分、反馈主题和改进建议。
                        </div>
                    </div>
                    
                    <div class="template-card" onclick="useTemplate(3)">
                        <div class="template-card-title">销售漏斗分析</div>
                        <div class="template-card-description">
                            分析销售过程中各阶段的转化率，识别潜在问题并提供优化建议。
                        </div>
                    </div>
                    
                    <div class="template-card" onclick="useTemplate(4)">
                        <div class="template-card-title">团队绩效报表</div>
                        <div class="template-card-description">
                            比较团队和个人的销售表现，包括关键绩效指标和同比环比分析。
                        </div>
                    </div>
                    
                    <div class="template-card" onclick="useTemplate(5)">
                        <div class="template-card-title">客户流失分析</div>
                        <div class="template-card-description">
                            分析客户流失原因和趋势，提供预警指标和挽留策略建议。
                        </div>
                    </div>
                    
                    <div class="template-card" onclick="useTemplate(6)">
                        <div class="template-card-title">产品使用情况</div>
                        <div class="template-card-description">
                            分析客户对不同产品的使用情况，识别热门功能和改进机会。
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据源管理标签内容 -->
            <div id="data-sources-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>数据源类型</label>
                        <select id="dataSourceTypeFilter">
                            <option value="">所有类型</option>
                            <option value="database">数据库</option>
                            <option value="api">API</option>
                            <option value="file">文件</option>
                            <option value="external">外部系统</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态</label>
                        <select id="dataSourceStatusFilter">
                            <option value="">所有状态</option>
                            <option value="active">已连接</option>
                            <option value="error">连接错误</option>
                            <option value="pending">待配置</option>
                        </select>
                    </div>
                    <div style="margin-top: 24px;">
                        <button class="btn btn-primary" onclick="addDataSource()">添加数据源</button>
                    </div>
                </div>
                
                <table class="table">
                    <thead>
                        <tr>
                            <th>数据源名称</th>
                            <th>类型</th>
                            <th>状态</th>
                            <th>最后更新</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>CRM主数据库</td>
                            <td>数据库</td>
                            <td>已连接</td>
                            <td>2023-05-20 10:30</td>
                            <td>
                                <button class="btn btn-sm btn-secondary" onclick="editDataSource(1)">编辑</button>
                                <button class="btn btn-sm btn-secondary" onclick="viewDataSourceSchema(1)">查看结构</button>
                                <button class="btn btn-sm btn-secondary" onclick="testConnection(1)">测试连接</button>
                            </td>
                        </tr>
                        <tr>
                            <td>销售API</td>
                            <td>API</td>
                            <td>已连接</td>
                            <td>2023-05-18 15:45</td>
                            <td>
                                <button class="btn btn-sm btn-secondary" onclick="editDataSource(2)">编辑</button>
                                <button class="btn btn-sm btn-secondary" onclick="viewDataSourceSchema(2)">查看结构</button>
                                <button class="btn btn-sm btn-secondary" onclick="testConnection(2)">测试连接</button>
                            </td>
                        </tr>
                        <tr>
                            <td>客户满意度数据</td>
                            <td>外部系统</td>
                            <td>连接错误</td>
                            <td>2023-05-15 09:20</td>
                            <td>
                                <button class="btn btn-sm btn-secondary" onclick="editDataSource(3)">编辑</button>
                                <button class="btn btn-sm btn-secondary" onclick="viewDataSourceSchema(3)">查看结构</button>
                                <button class="btn btn-sm btn-secondary" onclick="testConnection(3)">测试连接</button>
                            </td>
                        </tr>
                        <tr>
                            <td>历史销售数据</td>
                            <td>文件</td>
                            <td>已连接</td>
                            <td>2023-05-10 14:15</td>
                            <td>
                                <button class="btn btn-sm btn-secondary" onclick="editDataSource(4)">编辑</button>
                                <button class="btn btn-sm btn-secondary" onclick="viewDataSourceSchema(4)">查看结构</button>
                                <button class="btn btn-sm btn-secondary" onclick="testConnection(4)">测试连接</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                
                <div class="data-preview">
                    <h3>数据预览</h3>
                    <p>选择一个数据源并点击"查看结构"来预览其数据模式和示例数据。</p>
                </div>
            </div>
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            // 标签切换
            function switchTab(tabId) {
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.style.display = 'none';
                });
                
                // 取消所有标签的激活状态
                document.querySelectorAll('.tab').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 显示选中的标签内容
                document.getElementById(tabId + '-content').style.display = 'block';
                
                // 激活选中的标签
                document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
            }
            
            // 创建新报表
            function createNewReport() {
                alert('打开创建新报表向导');
            }
            
            // 编辑报表
            function editReport(reportId) {
                alert('编辑报表 ID: ' + reportId);
            }
            
            // 删除报表
            function deleteReport(reportId) {
                if (confirm('确定要删除此报表吗？此操作不可撤销。')) {
                    alert('删除报表 ID: ' + reportId);
                }
            }
            
            // 导出报表
            function exportReport(reportId, format) {
                alert('正在导出报表 ID: ' + reportId + ' 为 ' + format.toUpperCase() + ' 格式');
            }
            
            // 计划报表发送
            function scheduleReport(reportId) {
                alert('设置报表 ID: ' + reportId + ' 的定时发送');
            }
            
            // 编辑计划任务
            function editSchedule(scheduleId) {
                alert('编辑计划任务 ID: ' + scheduleId);
            }
            
            // 暂停计划任务
            function pauseSchedule(scheduleId) {
                alert('暂停计划任务 ID: ' + scheduleId);
            }
            
            // 恢复计划任务
            function resumeSchedule(scheduleId) {
                alert('恢复计划任务 ID: ' + scheduleId);
            }
            
            // 删除计划任务
            function deleteSchedule(scheduleId) {
                if (confirm('确定要删除此计划任务吗？')) {
                    alert('删除计划任务 ID: ' + scheduleId);
                }
            }
            
            // 使用报表模板
            function useTemplate(templateId) {
                alert('使用报表模板 ID: ' + templateId + ' 创建新报表');
            }
            
            // 添加数据源
            function addDataSource() {
                alert('添加新数据源');
            }
            
            // 编辑数据源
            function editDataSource(dataSourceId) {
                alert('编辑数据源 ID: ' + dataSourceId);
            }
            
            // 查看数据源结构
            function viewDataSourceSchema(dataSourceId) {
                alert('查看数据源 ID: ' + dataSourceId + ' 的结构');
            }
            
            // 测试数据源连接
            function testConnection(dataSourceId) {
                alert('测试数据源 ID: ' + dataSourceId + ' 的连接');
            }
        </script>
    </th:block>
</body>
</html> 